<template>
	<view>
		<van-tabs :active="active" bind:change="onChange">
			<van-tab title="消息">
				<van-swipe-cell right-width="170" v-for="(item, index) in topData" :key="index">
					<van-cell-group>
						<dl class="Top">
							<dt><img :src="item.img" alt=""></dt>
							<dd>
								<view>
									<p>{{ item.name }}</p>
									<v>{{ item.time }}</v>
								</view>
								<b>{{ item.title }}</b>
							</dd>
						</dl>
					</van-cell-group>
					<view slot="right" class="van-swipe-cell__right">
						<button class="Btn" @click="del_item(item)">删除</button>
						<button class="top_btn btn" @click="del_topData(item)">取消置顶</button>
					</view>
				</van-swipe-cell>
				<van-swipe-cell right-width="150" v-for="(item, index) in data" :key="index">
					<van-cell-group>
						<dl>
							<dt><img :src="item.img" alt=""></dt>
							<dd>
								<view>
									<p>{{ item.name }}</p>
									<v>{{ item.time }}</v>
								</view>
								<b>{{ item.title }}</b>
							</dd>
						</dl>
					</van-cell-group>
					<view slot="right" class="van-swipe-cell__right">
						<button class="Btn" @click="del_item(item)">删除</button>
						<button class="btn" @click="add_topData(item)">置顶</button>
					</view>
				</van-swipe-cell>
			</van-tab>
			<van-tab title="公告">
				<view class="notice">
					<view>
						<h2>放假通知</h2>
						<span>2021年5月27日 13:00:00</span>
					</view>
					<p>五月一日放假</p>
				</view>
			</van-tab>
		</van-tabs>
	</view>
</template>

<script>
export default {
	data() {
		return {
			data: [],
			topData: [],
			active: 0,
		}
	},
	onLoad() {
		const that = this
		uniCloud.callFunction({
			name: "message",
			success(res) {
				that.data = res.result.data
				console.log(that.data);
			}
		})
		setTimeout(() => {
			this.dataSort()
		}, 1000)

	},
	methods: {
		dataSort() {
			this.data.sort(function (a, b) {
				var dateA = new Date(a.timer)
				var dateB = new Date(b.timer)
				return dateB - dateA
			})
			this.topData.sort(function (a, b) {
				var dateA = new Date(a.timer)
				var dateB = new Date(b.timer)
				return dateB - dateA
			})
		},
		onChange(event) {
			wx.showToast({
				title: `切换到标签 ${event.detail.name}`,
				icon: 'none',
			});
		},
		del_item(obj) {
			this.data.forEach((item, index) => {
				if (item._id === obj._id) {
					this.data.splice(index, 1)
				}
			})
			this.dataSort()
		},
		add_topData(obj) {
			this.data.forEach((item, index) => {
				if (item._id === obj._id) {
					this.topData.push(this.data[index])
					console.log(this.topData);
					this.data.splice(index, 1)
				}
			})
			this.dataSort()
		},
		del_topData(obj) {
			this.topData.forEach((item, index) => {
				if (item._id === obj._id) {
					this.data.push(this.topData[index])
					console.log(this.data);
					this.topData.splice(index, 1)
				}
			})
			this.dataSort()
		}
	}
}
</script>

<style lang="scss">
.van-swipe-cell__right {
	display: flex;
	flex-direction: row;
}

.van-swipe-cell {
	width: 100%;
	height: 150rpx;
}

.Top {
	background: #f0f0f0;
}

.van-cell-group {
	width: 100%;
	height: 150rpx;

	dl {
		width: 100%;
		height: 150rpx;

		dt {
			width: 100rpx;
			height: 150rpx;
			display: flex;
			align-items: center;
			margin-left: 20rpx;
			float: left;

			img {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				border: 1px solid black;
			}
		}

		dd {
			float: left;
			margin-left: 30rpx;
			margin-top: 30rpx;

			p {
				float: left;
			}

			v {
				margin-left: 310rpx;
			}

			b {
				float: left;
				margin-top: 20rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				width: 500rpx;
			}
		}
	}
}

.Btn {
	width: 150rpx;
	height: 150rpx;
	background: #d51616;
	color: #fff;
	font-size: 30rpx;
	line-height: 150rpx;
	border-radius: 0;
}

.btn {
	width: 150rpx;
	height: 150rpx;
	background: #0ba9ff;
	color: #fff;
	font-size: 30rpx;
	line-height: 150rpx;
	border-radius: 0;
}

.top_btn {
	width: 190rpx;
}

.notice {
	width: 90vw;
	height: 100rpx;
	border: 1px solid black;
	margin-left: 2vw;
	margin-top: 5vh;
	padding: 20rpx;

	h2 {
		float: left;
	}

	span {
		float: right;
	}

	p {
		float: left;
		margin-top: 10rpx;
	}


}
</style>
